<template>
    <div>

      <img src="http://www.itcast.cn/2018czydz/images/gywmban.jpg" class="contactUs">
      <!-- tab标签页 -->
      <van-tabs v-model="active">
        <van-tab title="黑马概况">
          <div class="intro">{{introduce}}</div>
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px'}">联系电话</van-divider>
          <div class="tel">电话: <a href="tel:400-618-9090"> 400-618-9090</a></div>
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px'}">校区位置</van-divider>
          <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
            <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
            </bm-marker>
          </baidu-map>
        </van-tab>
        <van-tab title="品牌理念">
          <div v-html="idea"></div>
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px'}">联系电话</van-divider>
          <div class="tel">电话: <a href="tel:400-618-9090"> 400-618-9090</a></div>
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px'}">校区位置</van-divider>
          <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
           <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
           </bm-marker>
          </baidu-map>
        </van-tab>
      </van-tabs>

    </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      center: { lng: 0, lat: 0 },
      zoom: 3,
      // 黑马概况
      introduce: '',
      // 品牌理念
      idea: ''
    }
  },

  created () {
    this.getList()
  },

  methods: {
    onClickLeft () {
      this.$router.push('/index')
    },
    handler ({ BMap, map }) {
      // console.log(BMap, map)
      this.center.lng = 120.363172
      this.center.lat = 30.312212
      this.zoom = 15
    },
    async getList () {
      const { data: res } = await this.$http.get('http://localhost:8080/heima.json')
      // console.log(res)
      this.introduce = res.introduce
      this.idea = res.idea
      // console.log(this.idea)
    }
  }
}
</script>

<style scoped lang='less'>
.van-nav-bar {
  width: 100%;
  height: 50px;
  background: #1989fa;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 14px;
  .van-nav-bar__text{
    color: #fff;
  }
  .van-nav-bar__arrow{
      color: #fff
    }
  .van-nav-bar__title {
    color: #fff
  }
  .van-divider {
    background: rgb(25, 137, 250)
  }

}
 .tel{
   margin-left: 10px
  }
.bm-view {
  width: 100%;
  height: 400px;
}
.intro {
  text-indent: 2em;
  margin-top: 10px;
  line-height: 30px;
}
</style>
